<template>
	<process-frame
		:loading="loading" 
		:error="error" 
		:errorMsg="errorMsg" 
		:empty="!detailInfo" 
		:errorBtn="errorBtn" 
		@errorclick="getInfo"
	>
		<view class="sales-detail" v-if="detailInfo">
			<view class="product-card box-card">
				<custom-image
					:src="detailInfo.picUrl"
					width="160rpx" 
					height="160rpx" 
					radius="12rpx" 
					mode="aspectFill" 
					@click="onReviewImage"
				></custom-image>
				<view class="product-content">
					<view class="product-title">{{ detailInfo.name }}</view>
					<view class="product-label">货号：{{ detailInfo.goodsSn }}</view>
					<view class="product-label">销售：{{ detailInfo.saleNum }}件</view>
					<view class="product-label">产地：{{ detailInfo.factoryName }}</view>
				</view>
			</view>
			
			<view class="box-card m-t-20" v-for="(item, index) in storeList" :key="item.storeId">
				<view class="store-name m-b-20">{{ item.storeName }} 库存{{ item.stock }}件 销售{{ item.saleNum }}件</view>
				<uni-table border stripe emptyText="该门店暂无此商品">
					<uni-tr>
						<uni-th 
							align="center" 
							filter-type="search" 
							@filter-change="onFilter($event, index)"
						>规格</uni-th>
						<uni-th 
							align="center" 
							width="200rpx" 
						>库存</uni-th>
						<uni-th
							align="center" 
							width="200rpx" 
							sortable 
							filter-type="range" 
							@sort-change="onSort($event, index)" 
							@filter-change="onFilter($event, index)"
						>销售</uni-th>
					</uni-tr>
					<uni-tr v-for="(s, i) in item.list" :key="i">
						<uni-td align="center">{{ s.productName }}</uni-td>
						<uni-td align="center">{{ s.stock }}</uni-td>
						<uni-td align="center">{{ s.saleNum }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			
			<view class="p-30">
				<button class="custom-btn" @click="toGoodsDetailPage">商城中查看</button>
			</view>
		</view>
	</process-frame>
</template>

<script>
	import processFrame from '@/mixins/process-frame.js'
	import { deepClone } from '@/utils/util.js'
	import { saleInfo } from '@/api/sales.js'
	
	const app = getApp()
	
	export default {
		mixins: [processFrame],
		data() {
			return {
				detailInfo: null,
				storeList: []
			}
		},
		onLoad(options) {
			if (!options.goodsId) {
				this.loading = false
				this.error = true
				this.errorMsg = '缺少必要参数，无法加载页面'
				this.errorBtn = false
			} else {
				this.goodsId = options.goodsId
				this.getInfo()
			}
			this.$wxSdkUtil.init(null, { hideShare: true })
		},
		methods: {
			// 详情
			async getInfo() {
				try {
					this.loading = true
					this.error = false
					const { data } = await saleInfo({ id: this.goodsId })
					// 计算门店总销售
					data.storeStockList.forEach(store => {
						store.saleNum = store.list.reduce((total, item) => {
							return total + (item.saleNum || 0)
						}, 0)
					})
					// 计算所有总销售
					data.saleNum = data.storeStockList.reduce((total, item) => {
						return total + (item.saleNum || 0)
					}, 0)
					this.detailInfo = data
					this.storeList = data.storeStockList
					this.originStoreList = deepClone(data.storeStockList)
				} catch(error) {
					this.error = true
					this.errorMsg = error.message
				} finally {
					this.loading = false
				}
			},
			// 预览
			onReviewImage() {
				const url = this.detailInfo.picUrl
				uni.previewImage({
					current: url,
					urls: [url]
				})
			},
			// 排序
			onSort(e, storeIndex) {
				const { order } = e
				if (order === 'ascending') {
					this.storeList[storeIndex].list.sort((a, b) => a.saleNum - b.saleNum)
				} else if (order === 'descending') {
					this.storeList[storeIndex].list.sort((a, b) => b.saleNum - a.saleNum)
				} else {
					this.storeList[storeIndex].list = deepClone(this.originStoreList[storeIndex].list)
				}
			},
			// 过滤
			onFilter(e, storeIndex) {
				console.log(e)
				const { filterType, filter } = e
				if (filterType === 'search') {
					this.onSearch(filter, storeIndex)
				} else if (filterType === 'range') {
					this.onRange(filter, storeIndex)
				}
			},
			// 模糊搜索
			onSearch(filter, storeIndex) {
				const originStockList = deepClone(this.originStoreList[storeIndex].list)
				if (filter === '') {
					this.storeList[storeIndex].list = originStockList
				} else {
					const searchFn = (item) => {
						return item.productName.includes(filter) || filter.includes(item.productName)
					}
					this.storeList[storeIndex].list = originStockList.filter(searchFn)
				}
			},
			// 销售区间
			onRange(filter, storeIndex) {
				const originStockList = deepClone(this.originStoreList[storeIndex].list)
				if (isNaN(filter[0]) && isNaN(filter[1])) {
					this.storeList[storeIndex].list = originStockList
				} else {
					const min = filter[0] || 0
					const max = filter[1] || 999999
					const filterFn = (item) => {
						return item.saleNum >= min && item.saleNum <= max
					}
					this.storeList[storeIndex].list = originStockList.filter(filterFn)
				}
			},
			// 去商品详情
			toGoodsDetailPage() {
				app.globalData.webviewUrl = 'https://mongoljingoo.duuchin.com/pages/goods-detail/index?goodsId=' + this.goodsId
				uni.navigateTo({
					url: '/pages/webview/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sales-detail {
		padding: 20rpx;
		.box-card {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
		}
		.product-card {
			display: flex;
			.product-content {
				flex: 1;
				margin-left: 20rpx;
				.product-title {
					font-size: 28rpx;
					font-weight: 500;
					color: $u-main-color;
				}
				.product-label {
					margin-top: 6rpx;
					font-size: 24rpx;
					font-weight: normal;
					color: $u-content-color;
				}
			}
		}
		.store-name {
			font-size: 30rpx;
			font-weight: 500;
			color: $u-main-color;
		}
		.custom-btn {
			margin: 0 auto;
			padding: 0;
			background-color: $u-primary;
			width: 300rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #fff;
			border-radius: 12rpx;
			&::after {
				border: none;
			}
		}
		.custom-btn[disabled] {
			background-color: #c8c9cc;
		}
	}
</style>